<template>
  <main class="h-full flex flex-col max-w-7xl mx-auto px-6 pb-2">
    <div class="flex-shrink-0 mb-4">
      <div class="flex items-center gap-2">
        <div class="w-2 bg-yellow-200 h-8"></div>
        <h1 class="text-2xl font-bold mb-2">AI文案生成</h1>
      </div>

      <p class="text-gray-600 text-sm">基于选中的图片生成专业文案</p>
    </div>
    <!-- 左侧配置区域 -->
    <div class="pr-4 flex-1 flex flex-col">
      <div class="flex gap-3">
        <!-- 左侧滚动区域 -->
        <ScrollArea class="w-100 rounded-md border p-4 h-[600px]">
          <div class="space-y-6">
            <div class="flex items-center gap-2 mb-2">
              <div class="text-lg font-semibold">配置选项</div>
              <svg
                t="1753019482912"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4768"
                width="30"
                height="30"
              >
                <path
                  d="M691.399983 401.674586V276.106988l-81.188758-10.586057a248.657145 248.657145 0 0 0-18.524514-44.657078L641.617254 155.943279l-88.77507-88.766375-64.907532 49.9175a248.370213 248.370213 0 0 0-44.657077-18.533208L432.68717 17.389828H307.12392l-10.590406 81.16702a249.791832 249.791832 0 0 0-44.661424 18.511472l-64.907532-49.913153-88.788112 88.783765 49.930542 64.907531a249.16145 249.16145 0 0 0-18.515819 44.674468L48.406759 276.106988v125.567598l81.180063 10.573015a249.457077 249.457077 0 0 0 18.511471 44.678815l-49.926195 64.907532 88.779418 88.792459L251.867742 560.68717a250.643933 250.643933 0 0 0 44.65273 18.520166l10.594753 81.184411H432.678475l10.590405-81.184411a250.18745 250.18745 0 0 0 44.65273-18.520166l64.907532 49.93489 88.77507-88.79246-49.921848-64.911879a249.935298 249.935298 0 0 0 18.520166-44.657077l81.197453-10.586058zM369.901197 469.594905c-72.185174 0-130.706292-58.521117-130.706292-130.706292 0-72.17648 58.521117-130.69325 130.706292-130.693249s130.697597 58.51677 130.697597 130.693249c0.004347 72.185174-58.508075 130.706292-130.697597 130.706292z"
                  fill="#F06262"
                  p-id="4769"
                ></path>
                <path
                  d="M975.593241 823.230093v-89.005486l-57.54294-7.50371a175.380759 175.380759 0 0 0-13.129319-31.653834l35.388299-46.022179-62.929439-62.920744-46.004789 35.3883a176.724123 176.724123 0 0 0-31.658181-13.133668l-7.508058-57.529897h-89.005485l-7.508059 57.529897a176.124174 176.124174 0 0 0-31.653833 13.124973l-46.009137-35.3883-62.946828 62.942481 35.401341 46.004789a177.406674 177.406674 0 0 0-13.133667 31.662529l-57.534245 7.508058v89.005485l57.534245 7.499364a176.402411 176.402411 0 0 0 13.133667 31.671223l-35.401341 46.004789 62.942481 62.938134 46.013484-35.401342a177.697954 177.697954 0 0 0 31.653833 13.133668l7.508059 57.538592h89.005485l7.508058-57.538592a176.911064 176.911064 0 0 0 31.658181-13.133668l46.004789 35.401342 62.929439-62.938134-35.388299-46.013484a177.384937 177.384937 0 0 0 13.129319-31.653833l57.54294-7.516753z m-227.880649 48.143737c-51.169568 0-92.653002-41.479086-92.653001-92.653001 0-51.16522 41.483434-92.644307 92.653001-92.644307 51.173915 0 92.639959 41.479086 92.63996 92.644307 0.004347 51.173915-41.470391 92.653002-92.63996 92.653001z"
                  fill="#F0CF6D"
                  p-id="4770"
                ></path>
              </svg>
            </div>

            <!-- 选中图片展示 -->
            <div class="bg-white rounded-lg border p-4">
              <div class="flex items-center gap-2">
                <h3 class="text-lg font-semibold mb-1">选中图片</h3>
                <svg
                  t="1753020669006"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="25117"
                  width="30"
                  height="30"
                >
                  <path
                    d="M125.9 185h772.2v653.9H125.9z"
                    fill="#1F53CC"
                    p-id="25118"
                  ></path>
                  <path
                    d="M164.7 217.2h694.6v516.7H164.7z"
                    fill="#FECD44"
                    p-id="25119"
                  ></path>
                  <path
                    d="M458.9 734l-8.6-43.8-101.5-102.8-135 146.6z"
                    fill="#FC355D"
                    p-id="25120"
                  ></path>
                  <path
                    d="M306.9 348.7m-66.7 0a66.7 66.7 0 1 0 133.4 0 66.7 66.7 0 1 0-133.4 0Z"
                    fill="#FFFFFF"
                    p-id="25121"
                  ></path>
                  <path
                    d="M384.6 734h474.7V608.8L687.8 400.1z"
                    fill="#FC355D"
                    p-id="25122"
                  ></path>
                  <path
                    d="M422.5 662l-37.9 72 52.1-57.5z"
                    fill="#BF2847"
                    p-id="25123"
                  ></path>
                  <path
                    d="M302.5 778.9h418.9v16.7H302.5z"
                    fill="#00F0D4"
                    p-id="25124"
                  ></path>
                </svg>
              </div>

              <div v-if="selectedImage" class="space-y-3">
                <div class="relative">
                  <img
                    :src="selectedImage.url"
                    :alt="selectedImage.name"
                    class="w-full h-48 object-cover rounded-lg border"
                  />
                  <div
                    class="absolute top-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs"
                  >
                    已选择
                  </div>
                </div>
                <div>
                  <div class="flex items-center gap-2">
                    <h4 class="font-medium text-gray-900">
                      {{ selectedImage.originalName.split(".")[0] }}
                    </h4>
                    <Badge variant="secondary">
                      {{ selectedImage.originalName.split(".")[1] }}
                    </Badge>
                  </div>
                  <p class="text-sm text-gray-600 mt-1">
                    上传时间: {{ formatDate(selectedImage.uploadTime) }}
                  </p>
                  <div class="flex flex-wrap gap-1 mt-2">
                    <span
                      v-for="tag in selectedImage.tags"
                      :key="tag"
                      class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
              <div
                v-else
                class="text-center py-8 text-gray-500 flex flex-col items-center"
              >
                <svg
                  t="1753020164191"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12227"
                  width="150"
                  height="150"
                >
                  <path
                    d="M829.64898 849.502041H194.35102c-43.885714 0-79.412245-35.526531-79.412244-79.412245V253.910204c0-43.885714 35.526531-79.412245 79.412244-79.412245h635.29796c43.885714 0 79.412245 35.526531 79.412244 79.412245v516.179592c0 43.885714-35.526531 79.412245-79.412244 79.412245z"
                    fill="#D2F4FF"
                    p-id="12228"
                  ></path>
                  <path
                    d="M909.061224 656.195918l-39.706122-48.065306L626.416327 365.714286c-19.330612-19.330612-50.677551-19.330612-70.008164 0L419.526531 502.073469c-2.612245 2.612245-5.22449 3.134694-6.791837 3.134694-1.567347 0-4.702041-0.522449-6.791837-3.134694L368.326531 464.979592c-19.330612-19.330612-50.677551-19.330612-70.008164 0l-143.673469 143.673469-39.706122 48.065306v113.893878c0 43.885714 35.526531 79.412245 79.412244 79.412245h635.29796c43.885714 0 79.412245-35.526531 79.412244-79.412245v-114.416327"
                    fill="#16C4AF"
                    p-id="12229"
                  ></path>
                  <path
                    d="M273.763265 313.469388m-49.632653 0a49.632653 49.632653 0 1 0 99.265306 0 49.632653 49.632653 0 1 0-99.265306 0Z"
                    fill="#E5404F"
                    p-id="12230"
                  ></path>
                  <path
                    d="M644.179592 768h-365.714286c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h365.714286c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959zM461.322449 670.82449h-182.857143c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.89796h182.857143c11.493878 0 20.897959 9.404082 20.897959 20.89796s-9.404082 20.897959-20.897959 20.897959z"
                    fill="#0B9682"
                    p-id="12231"
                  ></path>
                </svg>
                <p>请先在素材库中选择一张图片</p>
              </div>
            </div>

            <!-- 文案风格选择 -->
            <div class="bg-white rounded-lg border p-4">
              <div class="flex items-center gap-2 mb-1">
                <h3 class="text-lg font-semibold mb-1">文案风格</h3>
                <svg
                  t="1753020815124"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="28191"
                  width="30"
                  height="30"
                >
                  <path
                    d="M237.472 112m32 0l448 0q32 0 32 32l0 128q0 32-32 32l-448 0q-32 0-32-32l0-128q0-32 32-32Z"
                    fill="#FFFFFF"
                    p-id="28192"
                  ></path>
                  <path
                    d="M413.472 672v-176H112v-288h109.472V128a32 32 0 0 1 32-32h480a32 32 0 0 1 32 32v160a32 32 0 0 1-32 32h-480a32 32 0 0 1-32-32V240H144v224h301.472V672h18.528a16 16 0 0 1 16 16v224a16 16 0 0 1-16 16h-64a16 16 0 0 1-16-16v-224a16 16 0 0 1 16-16h13.472z m-160-544v160h480V128h-480z"
                    fill="#5D6D7E"
                    p-id="28193"
                  ></path>
                  <path
                    d="M512 736m32 0l128 0q32 0 32 32l0 128q0 32-32 32l-128 0q-32 0-32-32l0-128q0-32 32-32Z"
                    fill="#27A2DF"
                    p-id="28194"
                  ></path>
                  <path
                    d="M512 512m32 0l128 0q32 0 32 32l0 128q0 32-32 32l-128 0q-32 0-32-32l0-128q0-32 32-32Z"
                    fill="#30AD98"
                    p-id="28195"
                  ></path>
                  <path
                    d="M736 736m32 0l128 0q32 0 32 32l0 128q0 32-32 32l-128 0q-32 0-32-32l0-128q0-32 32-32Z"
                    fill="#C49F74"
                    p-id="28196"
                  ></path>
                  <path
                    d="M736 512m32 0l128 0q32 0 32 32l0 128q0 32-32 32l-128 0q-32 0-32-32l0-128q0-32 32-32Z"
                    fill="#808FA1"
                    p-id="28197"
                  ></path>
                </svg>
              </div>
              <Select v-model="copywritingStyle">
                <SelectTrigger>
                  <span>{{ copywritingStyleLabel }}</span>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="marketing">营销推广</SelectItem>
                  <SelectItem value="warm">温馨暖心</SelectItem>
                  <SelectItem value="professional">专业正式</SelectItem>
                </SelectContent>
              </Select>
              <p class="text-sm text-gray-600 mt-2">
                {{ getStyleDescription() }}
              </p>
            </div>

            <!-- 文案类型选择 -->
            <div class="bg-white rounded-lg border p-4">
              <div class="flex items-center gap-2 mb-1">
                <h3 class="text-lg font-semibold mb-1">文案类型</h3>
                <svg
                  t="1753020898900"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="31470"
                  width="30"
                  height="30"
                >
                  <path
                    d="M840.7 898.1H223.4c-13.8 0-25-11.3-25-25V194.9c0-13.8 11.3-25 25-25h617.3c13.8 0 25 11.3 25 25v678.2c0 13.7-11.2 25-25 25z"
                    fill="#2D3647"
                    p-id="31471"
                  ></path>
                  <path
                    d="M840.7 194.9V873H223.5V194.9h617.2m0-25H223.4c-13.8 0-25 11.3-25 25v678.2c0 13.8 11.3 25 25 25h617.3c13.8 0 25-11.3 25-25V194.9c0-13.7-11.2-25-25-25z"
                    fill="#E04B87"
                    p-id="31472"
                  ></path>
                  <path
                    d="M514.3 639.3c11.8-10.5 30.8-13.5 47.2-2.4 12.4 8.4 75.9 52.4 75.9 52.4s143-115 160.8-128c17.8-12.9 41.1-16.3 58.2 6.1 17.1 22.5 8.2 319.4 8.2 319.4H381.9v-126l132.4-121.5z"
                    fill="#EDBFAB"
                    p-id="31473"
                  ></path>
                  <path
                    d="M864.6 899.3H369.4v-144L506 630c17.4-15.5 42.5-16.9 62.5-3.4 9.9 6.7 51.1 35.2 68.4 47.2 29.7-23.8 138.3-111.1 154-122.5 26.9-19.6 56.5-16.2 75.5 8.7 4 5.2 8.4 15.1 11 66.3 1.4 27.6 2.1 64.4 2 109.4-0.1 76.3-2.3 150.9-2.3 151.6l-0.4 12.1h-12.1v-0.1z m-470.2-25h458c0.6-23.7 1.9-78.7 2-135.2 0.3-135.6-6.1-160.1-8.2-164.4-13.4-17.3-29.5-11.4-40.6-3.3C788.2 584 646.7 697.9 645.3 699l-7.3 5.9-7.7-5.3c-0.6-0.4-63.6-44.1-75.8-52.3-11.9-8-24.6-5.1-31.8 1.3L394.4 766.4v107.9z m451.7-299.8z"
                    fill="#E04B87"
                    p-id="31474"
                  ></path>
                  <path
                    d="M541.1 340.3m-71.9 0a71.9 71.9 0 1 0 143.8 0 71.9 71.9 0 1 0-143.8 0Z"
                    fill="#EDBFAB"
                    p-id="31475"
                  ></path>
                  <path
                    d="M541.1 424.8c-46.6 0-84.4-37.9-84.4-84.4s37.9-84.4 84.4-84.4c46.6 0 84.4 37.9 84.4 84.4s-37.9 84.4-84.4 84.4z m0-143.9c-32.8 0-59.4 26.7-59.4 59.4s26.7 59.4 59.4 59.4 59.4-26.7 59.4-59.4-26.7-59.4-59.4-59.4z"
                    fill="#E04B87"
                    p-id="31476"
                  ></path>
                  <path
                    d="M284.5 348.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z"
                    fill="#EDBFAB"
                    p-id="31477"
                  ></path>
                  <path
                    d="M284.5 398.2c-27.6 0-50-22.4-50-50s22.4-50 50-50 50 22.4 50 50-22.5 50-50 50z m0-78c-15.4 0-28 12.6-28 28s12.6 28 28 28 28-12.6 28-28-12.6-28-28-28z"
                    fill="#E04B87"
                    p-id="31478"
                  ></path>
                  <path
                    d="M284.5 534m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z"
                    fill="#EDBFAB"
                    p-id="31479"
                  ></path>
                  <path
                    d="M284.5 584c-27.6 0-50-22.4-50-50s22.4-50 50-50 50 22.4 50 50-22.5 50-50 50z m0-78c-15.4 0-28 12.6-28 28s12.6 28 28 28 28-12.6 28-28-12.6-28-28-28z"
                    fill="#E04B87"
                    p-id="31480"
                  ></path>
                  <path
                    d="M284.5 719.8m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z"
                    fill="#EDBFAB"
                    p-id="31481"
                  ></path>
                  <path
                    d="M284.5 769.8c-27.6 0-50-22.4-50-50s22.4-50 50-50 50 22.4 50 50-22.5 50-50 50z m0-78.1c-15.4 0-28 12.6-28 28s12.6 28 28 28 28-12.6 28-28-12.6-28-28-28z"
                    fill="#E04B87"
                    p-id="31482"
                  ></path>
                  <path
                    d="M363.9 193.6h37.5v680.6h-37.5zM268 370.4H165.7c-11 0-20-9-20-20v-4.3c0-11 9-20 20-20H268c11 0 20 9 20 20v4.3c0 11-9 20-20 20zM268 556.1H165.7c-11 0-20-9-20-20v-4.3c0-11 9-20 20-20H268c11 0 20 9 20 20v4.3c0 11-9 20-20 20zM268 741.9H165.7c-11 0-20-9-20-20v-4.3c0-11 9-20 20-20H268c11 0 20 9 20 20v4.3c0 11-9 20-20 20z"
                    fill="#E04B87"
                    p-id="31483"
                  ></path>
                </svg>
              </div>

              <div class="space-y-2">
                <label class="flex items-center">
                  <input
                    type="radio"
                    v-model="copywritingType"
                    value="short"
                    class="mr-2"
                  />
                  <span class="text-sm">短句文案</span>
                </label>
                <label class="flex items-center">
                  <input
                    type="radio"
                    v-model="copywritingType"
                    value="long"
                    class="mr-2"
                  />
                  <span class="text-sm">长句文案</span>
                </label>
              </div>
              <p class="text-sm text-gray-600 mt-2">
                {{ getTypeDescription() }}
              </p>
            </div>

            <!-- 自定义提示词 -->
            <div class="bg-white rounded-lg border p-4">
              <div class="flex items-center gap-2 mb-1">
                <h3 class="text-lg font-semibold mb-1">自定义提示词</h3>
                <svg
                  t="1753020986060"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="33497"
                  width="30"
                  height="30"
                >
                  <path
                    d="M0 0h1024v1024H0V0z"
                    fill="#202425"
                    opacity=".01"
                    p-id="33498"
                  ></path>
                  <path
                    d="M682.666667 744.106667a375.466667 375.466667 0 0 0 204.8-334.506667c0-207.36-168.106667-375.466667-375.466667-375.466667S136.533333 202.24 136.533333 409.6a375.466667 375.466667 0 0 0 204.8 334.506667V819.2a34.133333 34.133333 0 0 0 34.133334 34.133333h273.066666a34.133333 34.133333 0 0 0 34.133334-34.133333v-75.093333z"
                    fill="#11AA66"
                    p-id="33499"
                  ></path>
                  <path
                    d="M341.333333 785.066667a34.133333 34.133333 0 0 0-34.133333 34.133333v68.266667a34.133333 34.133333 0 0 0 34.133333 34.133333h68.266667v34.133333a34.133333 34.133333 0 0 0 34.133333 34.133334h136.533334a34.133333 34.133333 0 0 0 34.133333-34.133334v-34.133333h68.266667a34.133333 34.133333 0 0 0 34.133333-34.133333v-68.266667a34.133333 34.133333 0 0 0-34.133333-34.133333H341.333333z"
                    fill="#FFAA44"
                    p-id="33500"
                  ></path>
                  <path
                    d="M395.946667 348.16a34.133333 34.133333 0 1 0-40.96 54.613333l122.88 92.16V682.666667a34.133333 34.133333 0 0 0 68.266666 0v-187.733334l122.88-92.16a34.133333 34.133333 0 0 0-40.96-54.613333L512 435.2l-116.053333-87.04z"
                    fill="#FFFFFF"
                    p-id="33501"
                  ></path>
                </svg>
              </div>

              <textarea
                v-model="customPrompt"
                placeholder="请输入自定义提示词，帮助AI更好地理解您的需求..."
                class="w-full h-24 p-3 border border-gray-300 rounded-md resize-none"
              ></textarea>
              <p class="text-sm text-gray-600 mt-2">
                可选：添加特定要求或风格描述，让生成的文案更符合您的期望
              </p>
            </div>

            <!-- 生成按钮 -->
            <div class="bg-white rounded-lg border p-4">
              <Button
                :disabled="!selectedImage || isGenerating"
                @click="generateCopywriting"
                class="w-full flex items-center justify-center gap-2"
                size="lg"
              >
                <svg
                  v-if="isGenerating"
                  class="w-4 h-4 animate-spin"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                  />
                </svg>
                <svg
                  v-else
                  class="w-4 h-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  />
                </svg>
                {{ isGenerating ? "生成中..." : "生成文案" }}
              </Button>
            </div>
          </div>
        </ScrollArea>
        <!-- 右侧结果区域 -->

        <div class="pl-4 flex-1 flex flex-col rounded-md border p-4 h-[600px]">
          <!-- 结果标题 -->
          <div class="flex-shrink-0 mb-4 flex items-center gap-2">
            <h2 class="text-xl font-semibold">生成结果</h2>
            <svg
              t="1753021038026"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="35697"
              width="30"
              height="30"
            >
              <path
                d="M786.1 888v0.4h-493c-93.9 0-170-76.1-170-170v-527c0-28.2 22.8-51 51-51h476c28.2 0 51 22.8 51 51v170h153c28.2 0 51 22.8 51 51v348.5c0 67.6-52.6 122.7-119 127.1z"
                fill="#358CF8"
                p-id="35698"
              ></path>
              <path
                d="M701.1 361.4h153c28.2 0 51 22.8 51 51v374c0 56.3-45.7 102-102 102s-102-45.7-102-102v-425z"
                fill="#6FAFFF"
                p-id="35699"
              ></path>
              <path
                d="M701.1 463.4h153c28.2 0 51 22.8 51 51v272c0 56.3-45.7 102-102 102s-102-45.7-102-102v-323z"
                fill="#6FF3FF"
                opacity=".1"
                p-id="35700"
              ></path>
              <path
                d="M701.1 548.4h153c28.2 0 51 22.8 51 51v187c0 56.3-45.7 102-102 102s-102-45.7-102-102v-238z"
                fill="#6FF3FF"
                opacity=".15"
                p-id="35701"
              ></path>
              <path
                d="M701.1 616.4h153c28.2 0 51 22.8 51 51v119c0 56.3-45.7 102-102 102s-102-45.7-102-102v-170z"
                fill="#6FF3FF"
                opacity=".2"
                p-id="35702"
              ></path>
              <path
                d="M250.6 352.9h170c14.1 0 25.5 11.4 25.5 25.5s-11.4 25.5-25.5 25.5h-170c-14.1 0-25.5-11.4-25.5-25.5s11.4-25.5 25.5-25.5z"
                fill="#FFFFFF"
                p-id="35703"
              ></path>
              <path
                d="M250.6 505.9h238c14.1 0 25.5 11.4 25.5 25.5s-11.4 25.5-25.5 25.5h-238c-14.1 0-25.5-11.4-25.5-25.5s11.4-25.5 25.5-25.5zM250.6 641.9h85c14.1 0 25.5 11.4 25.5 25.5s-11.4 25.5-25.5 25.5h-85c-14.1 0-25.5-11.4-25.5-25.5s11.4-25.5 25.5-25.5z"
                fill="#FFFFFF"
                opacity=".5"
                p-id="35704"
              ></path>
            </svg>
          </div>

          <!-- 右侧滚动区域 -->
          <ScrollArea class="flex-1 rounded-md border p-4 h-[500px]">
            <div
              v-if="copywritingResults.length === 0"
              class="flex flex-col items-center justify-center h-full text-gray-400 p-8"
            >
              <svg
                t="1753020431585"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="18610"
                width="150"
                height="150"
              >
                <path
                  d="M635.18340741 879.31593008c-22.577152-17.53573452-38.74998045-22.17301333-43.04987023-53.01134223l-29.49241363-29.49241363c13.3814803 35.49017125 39.40655408 64.815104 72.54228386 82.50375586zM561.39229867 690.90963911c9.48330192-5.963776 20.35863703-9.15198103 31.63811081-9.15198103 4.0753683 0 8.09733689 0.42355675 12.01978785 1.23547495 17.26509511-49.98212267 54.37667555-77.43806578 131.56837452-77.43806578 14.94099437 0 25.38670459-2.8386797 34.22071467-5.5790554-19.19476622-8.50147555-40.41993482-13.23099022-62.72644741-13.23099022-67.74237867 0-125.50022637 43.57294459-146.72054044 104.16461748z"
                  fill="#1D92FF"
                  p-id="18611"
                ></path>
                <path
                  d="M592.13353718 826.30458785l-29.49241363-29.49241363c13.38026667 35.48895763 39.40655408 64.81389037 72.54107023 82.50254223M770.84050015 599.97601185c-19.19476622-8.50147555-40.41993482-13.23099022-62.7264474-13.23099022-67.7435923 0-125.50265363 43.57294459-146.72296772 104.16461748 9.48330192-5.963776 20.35863703-9.15198103 31.63811082-9.15198103 4.0753683 0 8.09733689 0.42355675 12.01978785 1.23547495M350.20011141 211.01985185h257.28948148c30.82861985 0 55.82696297-24.99348859 55.82696296-55.82696296s-24.99834311-55.82696297-55.82696296-55.82696297h-257.28948148c-30.83347437 0-55.82696297 24.99348859-55.82696296 55.82696297s24.99348859 55.82696297 55.82696296 55.82696296z"
                  fill="#1D92FF"
                  p-id="18612"
                ></path>
                <path
                  d="M546.90520178 580.93416297c43.21006933-43.21006933 100.46183348-67.00691911 161.21006459-67.00691912 39.25970489 0 77.05213155 9.95297659 110.54588208 28.64651378v-358.73678222c0-16.09030163-13.041664-29.12711111-29.12711112-29.12711111H691.47154963V155.19288889c0 46.91892148-38.03515259 84.95407408-84.95407408 84.95407408H350.20011141c-46.91892148 0-84.95407408-38.03515259-84.95407408-84.95407408v-0.48302459H167.18354963c-16.08544711 0-29.12711111 13.03680948-29.12711111 29.12711111v685.45316029c0 16.09030163 13.041664 29.12711111 29.12711111 29.12711112h374.94237867c-40.17720889-42.58869097-62.22764563-97.81005275-62.22764563-156.2742329 0-60.74701748 23.79563615-117.99878163 67.00691911-161.20885095zM295.34526578 333.35493215H652.63540148v58.25422222H295.34526578v-58.25422222z m0 134.95440118h223.30785185v58.25422222h-223.30785185v-58.25422222z"
                  fill="#1D92FF"
                  p-id="18613"
                ></path>
                <path
                  d="M708.11526637 550.33613275c-105.49596918 0-191.80809482 86.31212563-191.80809482 191.8080948 0 105.49475555 86.31212563 191.81052208 191.80809482 191.81052208s191.81052208-86.31576652 191.81052208-191.81052208c0-105.49596918-86.31455289-191.80809482-191.81052208-191.8080948z m131.86814104 146.25450666l-146.25450666 146.25450667c-4.79383703 4.79383703-11.98944711 7.19439645-16.78328416 7.19439644-7.19075555 0-11.98580622-2.40055941-16.78328414-7.19439644l-83.91763437-83.91763438c-9.5888877-9.5888877-9.5888877-23.9740397 0-33.56778192 9.59374222-9.59010133 23.97889422-9.59010133 33.56778192 0l67.13192297 67.13556385 129.47364978-129.47364978c9.59010133-9.5888877 23.9740397-9.5888877 33.56414103 0 4.79505067 4.79383703 7.19439645 9.5888877 7.19439644 16.78328415 0.00121363 4.7962643-2.39813215 11.98944711-7.19318281 16.78571141z"
                  fill="#FF9E12"
                  p-id="18614"
                ></path>
              </svg>
              <p class="text-lg font-medium mb-2">暂无生成结果</p>
              <p class="text-sm text-gray-500">
                选择图片并配置参数后点击生成按钮
              </p>
            </div>

            <div v-else class="space-y-4 p-4">
              <div
                v-for="(result, index) in copywritingResults"
                :key="index"
                class="bg-white rounded-lg border p-4 hover:shadow-md transition-shadow"
              >
                <div class="flex justify-between items-start mb-3">
                  <div class="flex items-center gap-2">
                    <span
                      class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded"
                      >{{ result.type }}</span
                    >
                  </div>
                  <div class="flex gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      @click="copyAllCopywriting(result)"
                      class="text-xs"
                    >
                      <svg
                        class="w-3 h-3 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                        />
                      </svg>
                      复制全部
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      @click="regenerateCopywriting(index)"
                      class="text-xs"
                    >
                      <svg
                        class="w-3 h-3 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                        />
                      </svg>
                      重新生成
                    </Button>
                  </div>
                </div>
                <div class="relative">
                  <!-- 如果存在原始数组，显示为列表 -->
                  <div
                    v-if="
                      result.originalArray && result.originalArray.length > 0
                    "
                    class="space-y-3"
                  >
                    <div
                      v-for="(item, itemIndex) in result.originalArray"
                      :key="itemIndex"
                      class="bg-gray-50 rounded-lg p-3 border-l-4 border-blue-500"
                    >
                      <div class="flex items-start justify-between">
                        <p class="text-gray-800 leading-relaxed flex-1">
                          {{ item }}
                        </p>
                        <Button
                          size="sm"
                          variant="ghost"
                          @click="copyToClipboard(item)"
                          class="ml-2 flex-shrink-0"
                        >
                          <svg
                            class="w-3 h-3"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                            />
                          </svg>
                        </Button>
                      </div>
                    </div>
                  </div>
                  <!-- 如果没有原始数组，显示原始内容 -->
                  <div v-else>
                    <p
                      class="text-gray-800 leading-relaxed whitespace-pre-wrap pr-16"
                    >
                      {{ result.content }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </ScrollArea>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useMaterialStore } from "../stores/material";
import { Button } from "../components/ui/button";
import { ScrollArea } from "../components/ui/scroll-area";
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
} from "../components/ui/select";
import { generateText } from "../api/textGenerate";
import { toast } from "vue-sonner";
import { Badge } from "../components/ui/badge";

const materialStore = useMaterialStore();

// 获取从素材库选择的图片（使用新的单图片选择）
const selectedImage = computed(() => materialStore.getSelectedImageForAction());

// 文案风格
const copywritingStyle = ref("marketing");
const copywritingStyleLabel = computed(() => {
  const labels = {
    marketing: "营销推广",
    warm: "温馨暖心",
    professional: "专业正式",
  };
  return labels[copywritingStyle.value as keyof typeof labels];
});

// 文案类型
const copywritingType = ref("short");

// 自定义提示词
const customPrompt = ref("");

// 生成状态和结果
const isGenerating = ref(false);
const copywritingResults = ref<any[]>([]);

// 获取风格描述
function getStyleDescription() {
  const descriptions = {
    marketing: "突出产品优势，强调促销信息，适合电商推广和营销活动",
    warm: "情感化表达，温馨暖心，适合品牌营销和用户关怀",
    professional: "专业术语，权威性强，适合B2B场景和正式场合",
  };
  return descriptions[copywritingStyle.value as keyof typeof descriptions];
}

// 获取文案类型描述
function getTypeDescription() {
  const descriptions = {
    short: "适合短视频、社交媒体，简洁有力，易于传播",
    long: "适合详细产品介绍和营销，内容丰富，说服力强",
  };
  return descriptions[copywritingType.value as keyof typeof descriptions];
}

// 格式化日期
function formatDate(timestamp: number) {
  const date = new Date(timestamp);
  return date.toLocaleDateString("zh-CN");
}

// 生成文案
async function generateCopywriting() {
  if (!selectedImage.value) return;
  isGenerating.value = true;
  try {
    const res = await generateText({
      imageId: Number(selectedImage.value.id),
      contentType: copywritingType.value === "short" ? "SHORT" : "LONG",
      styleType:
        copywritingStyle.value === "marketing"
          ? "PROMOTIONAL"
          : copywritingStyle.value === "warm"
          ? "WARM"
          : "PROFESSIONAL",
      customPrompt: customPrompt.value, // 传递自定义提示词
    });

    // 处理新的响应格式
    if (res && res.success && res.data && res.data.content) {
      try {
        // 解析 JSON 格式的内容
        const contentStr = res.data.content;
        // 移除 ```json 和 ``` 标记
        const jsonStr = contentStr
          .replace(/```json\n?/g, "")
          .replace(/```/g, "")
          .trim();
        const contentArray = JSON.parse(jsonStr);

        // 将数组转换为单个文案对象
        copywritingResults.value = [
          {
            type: res.data.contentType || "SHORT",
            content: contentArray.join("\n\n"), // 将数组元素用双换行连接
            originalArray: contentArray, // 保存原始数组用于单独显示
          },
        ];
      } catch (parseError) {
        console.error("解析文案内容失败:", parseError);
        // 如果解析失败，直接显示原始内容
        copywritingResults.value = [
          {
            type: res.data.contentType || "SHORT",
            content: res.data.content,
          },
        ];
      }
    } else {
      copywritingResults.value = [];
    }
  } catch (e) {
    console.error("生成文案失败:", e);
    copywritingResults.value = [];
  } finally {
    isGenerating.value = false;
  }
}

// 生成短句文案
function generateShortCopywriting(): string[] {
  const imageName = selectedImage.value?.name || "产品";
  const style = copywritingStyle.value;

  const templates = {
    marketing: [
      `🔥 限时特惠！${imageName}，品质保证，错过再等一年！`,
      `💥 爆款推荐！${imageName}，性价比之王，速抢！`,
      `⚡ 新品上市！${imageName}，创新科技，引领潮流！`,
    ],
    warm: [
      `💝 ${imageName}，为生活增添美好`,
      `🎉 ${imageName}，让每一天都充满惊喜`,
      `💫 ${imageName}，传递温暖与关怀`,
    ],
    professional: [
      `🏢 ${imageName}，专业解决方案`,
      `📊 ${imageName}，数据驱动，精准高效`,
      `🔬 ${imageName}，技术领先，品质保证`,
    ],
  };

  return templates[style as keyof typeof templates] || templates.marketing;
}

// 生成长句文案
function generateLongCopywriting(): string[] {
  const imageName = selectedImage.value?.name || "产品";
  const style = copywritingStyle.value;

  const templates = {
    marketing: [
      `【限时特惠】${imageName}重磅来袭！采用先进工艺制作，品质卓越，性价比超高。现在购买享受超值优惠，还有精美礼品相送。数量有限，先到先得，错过这次再等一年！立即下单，让品质生活触手可及！`,
      `【爆款推荐】${imageName}凭借其出色的性能和优质的服务，已成为市场上的明星产品。独特的设计理念和精湛的制作工艺，让每一件产品都成为艺术品。现在购买还有专属优惠，机会难得，不容错过！`,
    ],
    warm: [
      `【情感共鸣】${imageName}不仅仅是一件产品，更是一种生活态度的体现。它承载着我们对美好生活的向往和追求，每一处细节都传递着温暖与关怀。选择${imageName}，就是选择一种更有品质、更有温度的生活方式。`,
      `【生活美学】${imageName}将实用性与美学完美结合，让每一次使用都成为享受。它陪伴您度过每一个重要时刻，见证生活中的美好瞬间。让${imageName}成为您生活中不可或缺的一部分，共同创造更多美好回忆。`,
    ],
    professional: [
      `【专业分析】${imageName}基于行业标准和用户需求深度研发，采用先进技术和成熟工艺，确保产品性能达到行业领先水平。经过严格的质量控制和性能测试，产品稳定性和可靠性得到充分验证，是专业人士的首选。`,
      `【技术优势】${imageName}运用前沿技术，在保证产品性能的同时，注重用户体验的优化。产品设计遵循人体工程学原理，操作便捷，维护简单。同时具备良好的扩展性和兼容性，能够满足不同应用场景的需求。`,
    ],
  };

  return templates[style as keyof typeof templates] || templates.marketing;
}

// 复制到剪贴板
function copyToClipboard(text: string) {
  // 优先使用现代 Clipboard API
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        toast("复制成功", { description: "文案已复制到剪贴板" });
      })
      .catch(err => {
        console.warn("Clipboard API 失败，使用降级方案:", err);
        fallbackCopyToClipboard(text);
      });
  } else {
    // 降级方案：使用传统的 document.execCommand
    fallbackCopyToClipboard(text);
  }
}

// 降级复制方案
function fallbackCopyToClipboard(text: string) {
  try {
    // 创建临时文本区域
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    textArea.style.top = "-999999px";
    document.body.appendChild(textArea);

    // 选择文本并复制
    textArea.focus();
    textArea.select();
    const successful = document.execCommand("copy");

    // 清理临时元素
    document.body.removeChild(textArea);

    if (successful) {
      toast("复制成功", { description: "文案已复制到剪贴板" });
    } else {
      toast("复制失败", { description: "请手动复制文案" });
    }
  } catch (err) {
    console.error("复制失败:", err);
    toast("复制失败", { description: "请手动复制文案" });
  }
}

// 复制全部文案
function copyAllCopywriting(result: any) {
  const textToCopy = result.originalArray
    ? result.originalArray.join("\n\n")
    : result.content;
  copyToClipboard(textToCopy);
}

// 重新生成
function regenerateCopywriting(index: number) {
  // 重新生成指定索引的文案
  generateCopywriting();
}

// 监听图片选择变化
watch(selectedImage, () => {
  // 当选择的图片变化时，清空之前的生成结果
  copywritingResults.value = [];
});
</script>
